<template> 
    
    <!--list-content-->
    <div class="main">
         <TypeNav :isShow="false"/>
        <div class="py-container">
            <!--bread-->
            <div class="bread">
                <ul class="fl sui-breadcrumb">
                    <li>
                        <a href="#">全部结果</a>
                    </li>
                </ul>
                <ul class="fl sui-tag">
                    <li class="with-x" v-show="breadCrumbs.categoryName">{{breadCrumbs.categoryName}}<i @click="removeCategorName">×</i></li>
                    <li class="with-x" v-show="breadCrumbs.keyword">{{breadCrumbs.keyword}}<i @click="removeKeword">×</i></li>
                    <li class="with-x" v-show="breadCrumbs.trademark">{{breadCrumbs.trademark}}<i @click="removeTrademark">×</i></li>
                    <li class="with-x" v-for="(item,index) in breadCrumbs.props" :key="index">{{item}}<i @click="removeProps(item)">×</i></li>
                </ul>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div class="type-wrap logo">
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="item in searchs.trademarkList" :key="item.tmId" @click="setTrademark(`${item.tmId}:${item.tmName}`,item.tmName)">{{item.tmName}}</li>
                        </ul>
                    </div>
                    <div class="ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                        <a href="javascript:void(0);">更多</a>
                    </div>
                </div>
                <div class="type-wrap" v-for="item in searchs.attrsList" :key="item.attrId">
                    <div class="fl key">{{item.attrName}}</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="(item1,index) in item.attrValueList" :key="index" @click="setProp(`${item.attrId}:${item1}:${item.attrName}`,item.attrId,item1)">
                                <a>{{item1}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>

            </div>
            <!--details-->
            <div class="details clearfix">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li :class="order.split(':')[0]==='1'?'active':''">
                                <a  @click="chooseOrder('1')" >综合
                                    <span
                                    v-show="order.split(':')[0]==='1'"
                                    class="iconfont"
                                    :class="{ 'icon-UP': order.split(':')[1]==='asc', 'icon-DOWN': order.split(':')[1]==='desc' }"
                                    ></span>
                                </a>
                            </li>
                            <li :class="order.split(':')[0]==='2'?'active':''">
                                <a @click="chooseOrder('2')" >价格
                                    <span
                                    v-show="order.split(':')[0]==='2'"
                                    class="iconfont"
                                    :class="{ 'icon-UP': order.split(':')[1]==='asc', 'icon-DOWN': order.split(':')[1]==='desc' }"
                                    ></span>
                                </a>
                            </li>
                
                        </ul>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="item in searchs.goodsList" :key="item.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <router-link :to="`/detail/${item.id}`"><img v-lazy="item.defaultImg" /></router-link>
                                </div>
                                <div class="price">
                                    <strong>
                                            <em>¥</em>
                                            <i>{{item.price}}</i>
                                        </strong>
                                </div>
                                <div class="attr">
                                    <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">{{item.title}}</a>
                                </div>
                                <div class="commit">
                                    <i class="command">已有<span>2000</span>人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                 <Pagination :pageNo='searchs.pageNo*1' :pageSize="searchs.pageSize*1" :totalNubmer='searchs.total*1' :pageNumber="5" @goPageNo='goPageNo'  v-if="searchs.pageNo"/> 
            </div>
            <!--hotsale-->
        
        </div>
    </div>
        
       
    
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
    data(){
        this.searchProps=[],
        this.trademark=''
        this.pageSize=10
        return{
            order:'1:desc',
            breadCrumbs:{
                props:[]
            },
        
        }
    },
    mounted(){
       ({categoryName:this.$route.query.categoryName})
        this.reqSearch()
    },
    components:{
        Pagination
    },
    computed:{
        searchs(){
           return this.$store.state.search.searchs
        },
    },
    watch:{
        $route(){
            console.log('路由变化了')
            this.reqSearch()
        }
    },
    methods:{
        //请求搜索数据根据参数
        reqSearch(){
            let data={}
            data.order=this.order
            if(this.searchProps.length>0){
                data.props=this.searchProps
            }
            if(this.trademark){
                data.trademark=this.trademark
            }
            if(this.pageNo){
                data.pageNo=this.pageNo
                data.pageSize=this.pageSize
            }
            if(this.$route.query.categoryName){
                this.breadCrumbs.categoryName=this.$route.query.categoryName
                const {categoryName,categroy1Id,categroy2Id,categroy3Id}=this.$route.query
                data.categoryName=categoryName||undefined
                data.category1Id=categroy1Id||undefined
                data.category2Id=categroy2Id||undefined
                data.category3Id=categroy3Id||undefined
                
            }
            if(this.$route.params.keyword){
                this.breadCrumbs.keyword=this.$route.params.keyword
                data.keyword=this.$route.params.keyword
            }
            console.log(data)
            this.$store.dispatch('getSearch',data)
        },

        chooseOrder(index){
            //上一次
             let s= this.order.split(":")
             //index 下一次
            if(s[0]===index){
                if(s[1]==='desc'){
                    this.order=s[0]+':'+'asc'
                }else{
                    this.order=s[0]+':'+'desc'
                }
            }else{  
                this.order=index+":"+'desc'
            }
            this.reqSearch()
        },
        setProp(prop,id,name){
            const p={}
            p[id]=name
            //去重
            if(this.searchProps.indexOf(prop)===-1){
                console.log(this.searchProps)
                this.searchProps.push(prop)
                console.log(this.searchProps)
                this.breadCrumbs.props.push(name)
            }
            this.reqSearch()
        },
        setTrademark(trademark,t){
            this.breadCrumbs.trademark=t
            this.trademark=trademark
            this.reqSearch()
        },
        //移除面包屑
        removeCategorName(){
            this.breadCrumbs.categoryName=undefined
            this.$router.push({name:'search',params:this.$route.params})
        },
        removeKeword(){
            this.breadCrumbs.keyword=undefined
            this.$router.push({name:'search',query:this.$route.query})
            this.$bus.$emit('empty','')
        },
        removeTrademark(){
            this.trademark=undefined
            this.breadCrumbs.trademark=undefined
            this.reqSearch()
        },
        removeProps(name){
          const index = this.breadCrumbs.props.indexOf(name)
          this.breadCrumbs.props.splice(index,1)
          this.searchProps.splice(index,1)
          this.reqSearch()
        },
        goPageNo(pageNo){
            this.pageNo=pageNo
            this.reqSearch()
        }
    }
}
</script>
<style lang="less" scoped>
 .main{
        margin: 10px 0;
        .py-container{
            width: 1200px;
            margin: 0 auto;
            .bread{
                margin-bottom: 5px;
                overflow: hidden;
                .sui-breadcrumb{
                    padding: 3px 15px;
                    margin: 0;
                    font-weight: 400;
                    border-radius: 3px;
                    float:left;
                    li{
                        display: inline-block;
                        line-height: 18px;
                        a{
                            color: #666;
                            text-decoration: none;
                            &:hover{
                                color: #4cb9fc;
                            }
                        }
                    }
                }
                .sui-tag{
                    margin-top: -5px;
                    list-style: none;
                    font-size: 0;
                    line-height: 0;
                    padding: 5px 0 0;
                    margin-bottom: 18px;
                    float: left;
                    .with-x{
                        font-size: 12px;
                        margin: 0 5px 5px 0;
                        display: inline-block;
                        overflow: hidden;
                        color: #000;
                        background: #f7f7f7;
                        padding: 0 7px;
                        height: 20px;
                        line-height: 20px;
                        border: 1px solid #dedede;
                        white-space: nowrap;
                        transition:color 400ms;
                        cursor: pointer;
                        i{
                            margin-left: 10px;
                            cursor: pointer;
                            font: 400 14px tahoma;
                            display: inline-block;
                            height: 100%;
                            vertical-align: middle;
                        }
                        &:hover{
                            color: #28a3ef;
                        }
                    }
                }
            }
            .selector{
                border: 1px solid #ddd;
                margin-bottom: 5px;
                overflow: hidden;
                .logo{
                    border-top: 0;
                    margin: 0;
                    position: relative;
                    overflow: hidden;
                    .key{
                        padding-bottom: 87px!important;
                    }
                }
                .type-wrap{
                    margin: 0;
                    position: relative;
                    border-top: 1px solid #ddd;
                    overflow:hidden;
                    .key{
                        width: 100px;
                        background: #f1f1f1;
                        line-height: 26px;
                        text-align: right;
                        padding: 10px 10px 0 15px;
                        float:left;
                    }
                    .value{
                        overflow: hidden;
                        padding: 10px 0 0 15px;
                        color: #333;
                        margin-left: 120px;
                        padding-right: 90px;
                        .logo-list{
                            li{
                                float: left;
                                border: 1px solid #e4e4e4;
                                margin: -1px -1px 0 0;
                                width: 105px;
                                height: 52px;
                                text-align: center;
                                line-height: 52px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-weight: 700;
                                color: #e1251b;
                                font-style: italic;
                                font-size: 14px;
                                img{
                                    max-width: 100%;
                                    vertical-align: middle;
                                }
                            }
                        }
                        .type-list{
                            li{
                                float: left;
                                display: block;
                                margin-right: 30px;
                                line-height: 26px;
                                a{
                                    text-decoration: none;
                                    color: #666;
                                }
                            }
                        }
                    }
                    .ext{
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        .sui-btn{
                            display: inline-block;
                            padding: 2px 14px;
                            box-sizing: border-box;
                            margin-bottom: 0;
                            font-size: 12px;
                            line-height: 18px;
                            text-align: center;
                            vertical-align: middle;
                            cursor: pointer;
                            padding: 0 10px;
                            background: #fff;
                            border: 1px solid #d5d5d5;
                        }
                        a{
                            color: #666;
                        }
                    }
                }
            }
            .details{
                margin-bottom: 5px;
                .sui-navbar{
                    overflow: visible;
                    margin-bottom: 0;
                    .filter{
                        min-height: 40px;
                        padding-right: 20px;
                        background: #fbfbfb;
                        border: 1px solid #e2e2e2;
                        padding-left: 0;
                        border-radius: 0;
                        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
                        .sui-nav{
                            position: relative;
                            left: 0;
                            display: block;
                            float: left;
                            margin: 0 10px 0 0;
                            li{
                                float: left;
                                line-height: 18px;
                                a{
                                    display: block;
                                    cursor: pointer;
                                    padding: 11px 15px;
                                    color: #777;
                                    text-decoration: none;
                                }
                                &.active{
                                    a{
                                        background: #e1251b;
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
                .goods-list{
                    margin: 20px 0;
                    ul{
                        display:flex;
                        flex-wrap:wrap;
                        li{
                            height: 100%;
                            width: 20%;
                            margin-top: 10px;
                            line-height: 28px;
                            .list-wrap{
                                .p-img{
                                    padding-left: 15px;
                                    width: 215px;
                                    height: 255px;
                                    a{
                                        color: #666;
                                        img{
                                            max-width: 100%;
                                            height: auto;
                                            vertical-align: middle;
                                        }
                                    }
                                }
                                .price{
                                    padding-left: 15px;
                                    font-size: 18px;
                                    color: #c81623;
                                    strong{
                                        font-weight: 700;
                                        i{
                                            margin-left: -5px;
                                        }
                                    }
                                }
                                .attr{
                                    padding-left: 15px;
                                    width: 85%;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                    min-height: 38px;
                                    cursor: pointer;
                                    line-height: 1.8;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    a{
                                        color: #333;
                                        text-decoration: none;
                                    }
                                }
                                .commit{
                                    padding-left: 15px;
                                    height: 22px;
                                    font-size: 13px;
                                    color: #a7a7a7;
                                    span{
                                        font-weight: 700;
                                        color: #646fb0;
                                    }
                                }
                                .operate{
                                    padding: 12px 15px;
                                    .sui-btn{
                                        display: inline-block;
                                        padding: 2px 14px;
                                        box-sizing: border-box;
                                        margin-bottom: 0;
                                        font-size: 12px;
                                        line-height: 18px;
                                        text-align: center;
                                        vertical-align: middle;
                                        cursor: pointer;
                                        border-radius: 0;
                                        background-color: transparent;
                                        margin-right: 15px;
                                    }
                                    .btn-bordered{
                                        min-width: 85px;
                                        background-color: transparent;
                                        border: 1px solid #8c8c8c;
                                        color: #8c8c8c;
                                        &:hover{
                                            border: 1px solid #666;
                                            color: #fff!important;
                                            background-color: #666;
                                            text-decoration: none;
                                        }
                                    }
                                    .btn-danger{
                                        border: 1px solid #e1251b;
                                        color: #e1251b;
                                        &:hover{
                                            border: 1px solid #e1251b;
                                            background-color: #e1251b;
                                            color:white!important;
                                            text-decoration: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                
            }
            .hot-sale{
                margin-bottom: 5px;
                border: 1px solid #ddd;
                .title{
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 21px;
                    border-bottom: 1px solid #ddd;
                    background: #f1f1f1;
                    color: #333;
                    margin: 0;
                    padding: 5px 0 5px 15px;
                }
                .hot-list{
                    padding: 15px;
                    ul{
                        display:flex;
                        li{
                            width:25%;
                            height: 100%;
                            .list-wrap{
                                .p-img,.price,.attr,.commit{
                                    padding-left: 15px;
                                }
                                .p-img{
                                    img{
                                        max-width: 100%;
                                        vertical-align: middle;
                                        border: 0;
                                    }
                                }
                                .attr{
                                    width: 85%;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                    min-height: 38px;
                                    cursor: pointer;
                                    line-height: 1.8;
                                }
                                .price{
                                    font-size: 18px;
                                    color: #c81623;
                                    strong{
                                        font-weight: 700;
                                        i{
                                            margin-left: -5px;
                                        }
                                    }
                                }
                                .commit{
                                    height:22px;
                                    font-size: 13px;
                                    color: #a7a7a7;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>